<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>任务详情</title>
    <!-- 引入Mui -->
	<link rel="stylesheet" href="css/mui.min.css">
	<!-- 引入公共样式 -->
    <link rel="stylesheet" href="css/public.css">
    <style>
       .tasks_conten_text li:after,.tasks_conten_ask li:after{
            background: none;
       }
       .tasks_conten_text .tasks_conten_text_info:after{
            position: absolute;
            right: 0;
            bottom: 0;
            left: 15px;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #c8c7cc;
       }
       .mui-btn-block{
           margin:0 auto;
           font-size: 16px;
           padding: 8px 0;
           width: 96%;
       }
       #remessage{
           width: 96%;
           margin: 0 auto 10px auto;
           display: block;
       }
    </style>
</head>
<body>
    <!-- 头部 -->
	<header id="header" class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">任务详情</h1>
    </header>
    <!-- 头部 结束 -->
    <div class="mui-content">
        <div class="mui-card">
            <div class="mui-card-header mui-card-media">
                <img src="img/task.jpg">
                <div class="mui-media-body">
                    <h4>任务名称</h4>
                    <p>发布日期</p>
                </div>
            </div>
            <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(img/tasksdetails.jpg)"></div>
            <div class="mui-card-content">
                <div class="tasks_conten_head">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell"><p>任务编号 : 9527</p></li>
                        <li class="mui-table-view-cell"><p>已枪 : <b class='mui-badge mui-badge-inverted mui-badge-danger'>1200</b>/ 2000,￥1元/份</p></li>
                    </ul>
                </div>
                <div class="tasks_conten_text">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell"><p>任务描述</p></li>
                        <li class="mui-table-view-cell tasks_conten_text_info"><p>任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述</p></li>
                    </ul>
                </div>
                <div class="tasks_conten_ask">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell"><p>任务要求</p></li>
                        <li class="mui-table-view-cell"><p>任务平台：<span>抖音</span></p></li>
                        <li class="mui-table-view-cell"><p>任务ID：<span>抖音</span></p></li>
                        <li class="mui-table-view-cell"><p>任务要求：<span>抖音</span></p></li>
                        <li class="mui-table-view-cell"><p>任务回复：<span>抖音</span></p></li>
                    </ul>
                </div>
            </div>
            <div class="mui-card-footer">
                <a href="" class="mui-card-link">下载</a>
                <a href="" class="mui-badge mui-badge-warning mui-badge-inverted">剩余 ：2小时38分13秒</a>
            </div>
        </div>
        <button class="mui-btn mui-btn-primary mui-btn-block" type="button">抢任务</button>
        <!-- 以下为抢过任务后的Dom -->
        <!-- <input type="text" placeholder="请输入回复内容" id="remessage">
        <button class="mui-btn mui-btn-warning mui-btn-block" type="button">提交任务</button> -->
    </div>

    <script src="js/jquery.min.js"></script> 
    <script src="js/mui.min.js"></script> 
    <script src="js/doT.js"></script>
    <!-- 以上为引入第三方插件 -->
    <script>
        // 页面初始化
        mui.init()
    </script>
</body>
</html>